<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <style>
        /* 设置全局字体颜色为粉色 */
        body, .navbar, .table th, .table td {
            color: hotpink; /* 设置字体颜色为粉色 */
        }

        /* 设置链接颜色为粉色 */
        .navbar-nav > li > a {
            color: skyblue; /* 设置右侧链接颜色为粉色 */
        }

        /* 悬停时链接颜色 */
        .navbar-nav > li > a:hover {
            color: white; /* 悬停时颜色为白色 */
        }

        /* 设置占位符文字为粉色 */
        .form-control::placeholder {
            color: hotpink; /* 设置提示字颜色为粉色 */
        }

        /* 设置模态框提示信息颜色 */
        #showTip, #showTipUpdate {
            color: red;
        }
        
        .color1{
        	color: hotpink;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html" style="color: hotpink;">课堂作用</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入关键字搜索..."
                           oninput="searchData(this.value)">
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" data-toggle="modal" data-target="#myModal" style="color: hotpink;">添加用户</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false" style="color: hotpink;">退出系统 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#" onclick="logOut()" style="color: hotpink;">安全退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<table class="table table-hover table-bordered">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>地址</th>
    </tr>
    </thead>
    <tbody id="userTableBody">
    <!-- 用户数据将通过JavaScript动态插入 -->
    </tbody>
    <tfoot>
    <tr>
        <td colspan="5" style="text-align: center" id="pageBar"></td>
    </tr>
    </tfoot>
</table>

<!-- 添加用户的模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                <h5 id="showTip"></h5> <!-- 提示信息 -->
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputName" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputGender" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <select id="inputGender" class="form-control" style="color: hotpink;">
                                <option value="0" >男</option>
                                <option value="1" >女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAge" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputAge" placeholder="请输入年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAddr" class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputAddr" placeholder="请输入地址">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="subData()">提交</button>
            </div>
        </div>
    </div>
</div>

<!-- 更新的模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="updateModalLabel">更新用户</h4>
                <h5 id="showTipUpdate"></h5> <!-- 提示信息 -->
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputNameUpdate" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="hidden" id="hiddenEId">
                            <input type="text" class="form-control" id="inputNameUpdate" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputGenderUpdate" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <select id="inputGenderUpdate" class="form-control">
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAgeUpdate" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputAgeUpdate" placeholder="请输入年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAddrUpdate" class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputAddrUpdate" placeholder="请输入地址">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="subDataUpdate()">更新</button>
            </div>
        </div>
    </div>
</div>

<script>
	let currentQuery = "";
   
    // DOM加载完毕后马上就需要执行初始化表格
    window.onload = function () {
        initTable();
    }

    // 添加用户
    function subData() {
        const name = document.getElementById("inputName").value;
        const gender = document.getElementById("inputGender").value;
        const age = document.getElementById("inputAge").value;
        const address = document.getElementById("inputAddr").value;

        if (!name || !age || !address) {
            document.getElementById("showTip").innerHTML = '请完善需要填写的字段';
            return;
        }

        document.getElementById("showTip").innerHTML = '';

        // 组织json对象
        const user = { name, gender, age, address };

        $.ajax({
            url: 'http://localhost:8080/student/add',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(user),
            success: function (res) {
                document.getElementById("showTip").innerHTML = res.code === 200 ? '添加成功' : res.message;
                if (res.code === 200) {
                    onPage();
                    $("#myModal").modal("hide");
                }
            }
        });
    }

    // 获取分页数据
    function initTable() {
        $.ajax({
            url: 'http://127.0.0.1:8080/student/all/',
            // + currentPage,
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.data.length > 0) {
                    updatePageForm(res);
                }
            }
        });
    }

    // 跳转目的页码
    function onPage() {
        let url = 'http://localhost:8080/student/all/';
        if (currentQuery) {
            url = 'http://localhost:8080/student/name/' + encodeURIComponent(currentQuery);
        }
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.data.length > 0) {
                    
                    updatePageForm(res);
                }
            }
        });
    }

    // 清空表格数据并遍历填充表格
    function updatePageForm(res) {
    const data = res.data; // 获取数据
    $("#userTableBody").empty(); // 清空表格内容

    data.forEach(item => {
        $("<tr>" +
            "<td>" + item.id + "</td>" + // 使用 item.id
            "<td>" + item.name + "</td>" + // 使用 item.name
            "<td>" + (item.gender==0?'男':'女') + "</td>" + // 使用 item.gender
            "<td>" + item.age + "</td>" + // 使用 item.age
            "<td>" + item.address + "</td>" + // 使用 item.address
            "<td><button class='btn btn-success' data-toggle='modal' data-target='#updateModal' onclick='updatePersonData(" + item.id + ")'>更新</button>&nbsp;" +
            "<button class='btn btn-danger' onclick='delRow(" + item.id + ")'>删除</button></td>" + // 使用 item.id
            "</tr>").appendTo($("#userTableBody")); // 将新行添加到表格中
    });
}

    

    // 删除业务(学生离职的逻辑删除)
function delRow(eid) {
    if (!confirm("确认是否要让[" + eid + "]该学生滚蛋")) {
        return;
    }
    $.ajax({
        url: 'http://localhost:8080/student/delete/' + eid, // 修改为正确的删除路径
        type: 'delete',
        dataType: 'json',
        success: function (res) {
            if (res.code === 200) {
                onPage();
            }
        }
    });
}

    // 条件查询
    function searchData(query_value) {
        if (query_value === "") {
            initTable();
            currentQuery = "";
            return;
        }
        currentQuery = query_value;
        $.ajax({
            url: 'http://localhost:8080/student/name/' + encodeURIComponent(query_value),
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.data.length > 0) {
                	console.log(res.size);
                	onPage();
                    updatePageForm(res);
                    
                }
            }
        });
    }

    // 更新个人数据
function updatePersonData(id) {
    $.ajax({
        url: 'http://localhost:8080/student/user/' + id, // 确保路径一致
        type: 'get',
        dataType: 'json',
        success: function (res) {
            if (res.code === 200) {
                document.getElementById("inputNameUpdate").value = res.data.name; // 确保字段名一致
                document.getElementById("inputGenderUpdate").value = res.data.gender;
                document.getElementById("inputAgeUpdate").value = res.data.age;
                document.getElementById("inputAddrUpdate").value = res.data.address;
                document.getElementById("hiddenEId").value = id; // 存储ID
            }
        }
    });
}

    // 重新将修改过的用户数据添加进数据库去
    function subDataUpdate() {
        const id = document.getElementById("hiddenEId").value; // 获取隐藏的用户ID
        const name = document.getElementById("inputNameUpdate").value;
        const gender = document.getElementById("inputGenderUpdate").value;
        const age = document.getElementById("inputAgeUpdate").value;
        const address = document.getElementById("inputAddrUpdate").value;

        const user = { id, name, gender, age, address };

        $.ajax({
            url: 'http://localhost:8080/student/update',
            type: 'put',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(user),
            success: function (res) {
                document.getElementById("showTipUpdate").innerHTML = res.code === 200 ? '更新成功' : res.message;
                if (res.code === 200) {
                    
                    $("#updateModal").modal("hide");
                    
                }
            }
        });
    }

    function logOut() {
        if (!confirm("确定要退出吗?")) {
            return;
        }
        $.ajax({
            url: 'logOut',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.code === 200) {
                    localStorage.removeItem("logUser");
                    window.location.reload();
                }
            }
        });
    }
</script>
</body>
</html>